.content-part1{
    display: flex;
    height:auto;
    justify-content: space-between;
    position: relative;
    padding-top: 60px;
    padding-bottom: 60px;
    /* padding-block:60px ;同一个意思，设置上下内边距 */
}
.content-part1 > div{
    width: 500px;
    /* height: 600px; */
    /* border: 2px solid rgb(216, 130, 32); */
}

/* 背景设置 */

.content-part1-bg.content-part1-bg{
    /* 增加优先级 */
    width: 100%;
    height: 100%;
    position: absolute;
    /* background-color: royalblue; */
    left:0;
    display: flex;
    justify-content: center;
    z-index: -1;
    opacity: 0.3;
    /* 透明度 */
    top:0;
    /* 顶部空白为0 */
}
.content-part1-bg > div{
    width: 100vw;
    height: 100%;
    background:linear-gradient(96.1deg,#FF7A7A 0.86%, #C1FF72 34.84%,#6675FF 65.94%, #F878B7 100%);
    /* 一个线性渐变背景 */
    flex-shrink: 0;
    /* 自动弹性收缩 */
}

/* 左侧内容 */

.content-part1-left{
    display: flex;
    flex-direction: column;
    /* 定弹性容器内的子元素应该沿着主轴的方向排列 */
    justify-content: space-between;
    gap:100px;
}


.content-part1-left-title{
    display:flex;
    flex-direction: column;
    /* 纵向布局 */
    /* border:2px solid red; */
    gap:20px;
    /* gap设置子元素之间的距离 */
}
.content-part1-left-title > span:first-child{
    font-size: 4.5rem;
    white-space: pre-line;
    /* 使文本既可以按照预期格式化，又能在容器中自动换行。 */
    font-weight: 300;
    letter-spacing: 2px;
}
.content-part1-left-title > span:last-child{
    font-size:1.4rem;
    font-weight: 200;
    letter-spacing: 1px;
    /* 文字字母之间的间距 */
}
.content-part1-left-title > span:last-child > span{
    display: inline-block;
    padding: 10px 14px;
    background-color: black;
    color: white;
    border-radius: 6px;
    font-weight: 700;
    font-size: 1.8rem;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.322);
}
.content-part1-left-title > span:last-child > span > span{
    font-size:0.8rem;
    vertical-align: top;
    /* 设置内联或表格单元格元素的垂直对齐方式，关键字若不能满足就用数值如：10px */
}

.content-part1-left-other{
    display: flex;
    flex-direction: column;
    gap:40px
}
.content-part1-left-other > div:first-child{
    padding:30px 40px;
    gap:60px;
    background-color: #f36c18;
    border-radius: 100px;
    display: flex;
    align-items:center;
    justify-content:space-between;
    align-self: flex-start;
    /* 将单个项目对齐到弹性容器的交叉轴的起始位置。
    在 flex-direction: row 中，交叉轴是垂直的；
    在 flex-direction: column 中，交叉轴是水平的。 */
    font-size:1.5rem;
    color:white;
    letter-spacing: 1px;
    /* 字母之间的间距 */
    transition: gap 0.3s ease ;
    cursor: pointer;
}

/* 按钮变长 */
.content-part1-left-other>div:first-child:hover{
    gap:120px;
}


.content-part1-left-other > div:first-child >span{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translate(-10px);
    /* 箭头水平向左移 */
}
.content-part1-left-other > div:first-child >span::after{
    content:'';
    /* 创建一个空的伪元素。 */
    display: inline-block;
    /* 使伪元素成为一个内联块元素，允许设置宽度和高度 */
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.185);
    border-radius: 50%;
    margin-left: 10px;
    position: absolute;
    transform: translate(10px);
    /* 为元素（圆圈）水平向右移 */
}
.content-part1-left-other>div:last-child{
    display: flex;
    align-items: center;
    gap:16px;
    font-size: 1.2rem;
    font-weight: 500;
}
.content-part1-left-other> div:last-child > div{
    width: 20px;
}
.content-part1-left-other> div:last-child > span{
    border-bottom: 1px solid gray;
    padding-bottom: 6px;
}

/* 右侧内容 */
.content-part1-right{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16rem;
    color: white;
    z-index: 0;
    position: absolute;
    /* border: 2px solid red; */
    right: var(--main-block-padding);
    bottom: 0;
}
.content-part1-right>img{
    width:100%;
    z-index: 1;
}
.content-part1-right > :not(img){
    /* 选择 .content-part1-right 容器内的所有直接子元素，除了 <img> 元素 */
    position: absolute;
}
.content-part1-right-circle{
    width:400px;
    height:400px;
    background-color: rgba(255, 255, 255, 0.325);
    border-radius: 50%;
    transform: translateY(-100px);
}
.content-part1-right > span{
    top:100px;
}

.content-part1-right-items{
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}
.content-part1-right-items > div{
    /* width:100px;
    height:100px; */
    /* background-color: #F878B7; */
    /* border: 1px solid red; */
    position: absolute;
}
.content-part1-right-items > div:nth-child(1){
    transform: translateX(-300px) translateY(-260px);
}
.content-part1-right-items > div:nth-child(2){
    transform: translateX(-300px) translateY(200px);
}
.content-part1-right-items > div:nth-child(3){
    transform: translateX(200px) translateY(-220px);
}
.content-part1-right-items-one{
    font-size: 1rem;
    color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:12px;
}
.content-part1-right-items-one >div{
    width:100px;
    height:100px;
    background-color: #6675FF;
    border-radius: 50%;
    display: flex;
    align-items: flex-end;
    /* 让裁切层与底部对齐 */
    box-shadow: 0px 30px 30px rgba(2, 2, 2, 0.211);
    /* box-shadow用于定义阴影效果。
水平偏移量 垂直偏移量 模糊半径 扩展半径（可选）  颜色*/
}
.content-part1-right-items-one >div>div{
    width:100%;
    height:130%;
    /* border:6px solid red; */
    display: flex;
    align-items: flex-end;
    /* 让裁切层与底部对齐 */
    border-radius: 100px;
    overflow: hidden;
    justify-content: center;
    pointer-events: none;
    /* 取消掉裁切层及其内部元素对鼠标的反应 */
}
.content-part1-right-items-one >div>div>img{
    width:100%;
    transition: width 0.3s ease-in-out;
}
.content-part1-right-items-one >div:hover img{
    width: 130%;
}
.content-part1-right-items-one > span{
    font-size: 0.8rem;
    background-color: white;
    padding: 10px 20px;
    text-wrap: nowrap;
    /*  不换行*/
    border-radius: 100px;
    text-transform: capitalize;
    /* 首字母大写 */

}
.content-part1-right-items>div:nth-child(2)>div{
    background-color: #fdb943;
}
.content-part1-right-items>div:nth-child(3)>div{
    background-color: #fe7a97;
}
